<!DOCTYPE html>
<html>
<head>
 	<title>上传头像裁剪</title>
 	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  	<meta http-equiv="description" content="this is my page">
  	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
  	<link rel="stylesheet" href="css/cropper.css">
  	<link rel="stylesheet" href="css/myCrop.css">
</head>
	
<body style="margin: auto;text-align: center;">
	<section style="margin-top: 50px;">
		<input id="inputImage_input" type="button" onclick="document.getElementById('inputImage').click()" value="选择照片"><!-- 可以增加自己的样式 -->
		<input  id="inputImage"  type="file" class="file_cutimg_class"  style="display: none;"/>
		<br/>
  		<img  id="inputImage_img" />
		<button onclick="submitForm()">上传</button>
	</section>

	<div class="container" style="width:100%;height:100%;text-align:center;padding: 0;margin: 0;position:fixed;display:block;top: 0;background-color:#eeeeee;z-index: 200;" id="containerDiv">
		<div class="img-container">
			<img src="" alt="Picture">
		</div>
		<div class="row" id="actions" style="padding: 0;margin: 0;width: 100%;position: fixed;bottom: 5px;background-color: #abc;">
			<button type="button"   data-method="destroy" title="Destroy" style="height: auto;">
				<span   >取消</span>
			</button>
			<button type="button"   id="imgCutConfirm" data-method="getCroppedCanvas"  style="height: auto;margin-right: 17px;">
				<span   title="">确认</span> <!--cropper.getCroppedCanvas({ width: 320, height: 180 }) -->
			</button>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/exif.js"></script>
<script type="text/javascript" src="js/cropper.js"></script>
<script type="text/javascript" src="js/myCrop.js?v=1.0.4"></script>
<script type="text/javascript">

	
	$(function(){
		$("#imgCutConfirm").bind("click",function(){
			 $("#containerDiv").hide();
		})
	})
	
	//提交表达
	function submitForm(){
		var formData = new FormData();
		formData.append("imgBase64",$("#inputImage_img").attr("src"));//
		$.ajax({
	        url: "upload.php",
	        type: 'POST',  
	        data: formData,  
	        timeout : 10000, //超时时间设置，单位毫秒
	        async: true,  
	        cache: false,  
	        contentType: false,  
	        processData: false, 
	        success: function (result) {
				if(result.res){
					alert(result.msg+'  图片路径:'+result.data.imgurl);
				}else{
					alert(result.msg);
				}

	       	}
 		});
	}
</script>

</html>
